<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<link rel="stylesheet" href="../../resources/css/videoplay.css" />
		<script type="text/javascript" src="//cytroncdn.videojj.com/latest/cytron.core.js"></script>
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/js/getUrlString.js"></script>
	</head>

	<body>
		<script>
			var courseId= GetUrlString("courseId");
			$(document).ready(function() {
				$.ajax({
					type: "post",
					url: "/course/queryCourseDeatilsById.action",
					dataType: "json",
					data: {
						"course.courseId": GetUrlString("courseId")
					},
					success: function(data) {
						var course = data.course;

						$(".title").html(course.courseName);
						$(".coursetitle").html(course.courseName);
						$("#exit").attr("href","/pages/course/coursedetails.jsp?courseId="+courseId+"")
					}
				});
				$.ajax({
					type: "post",
					url: "/courseChapter/queryClassHourByHourId.action",
					data: {
						"classHour.classHourId": GetUrlString("classhourId")
					},
					dataType: "json",
					success: function(data) {
						$.each(data.classHour, function(index, item) {
							var url = item.classHourUrl;
							$("#url").html(url);
						});
						play();
					}
				});

				$.ajax({
					type: "post",
					url: "/courseChapter/queryCourseChapter.action",
					data: {
						"course.courseId": GetUrlString("courseId")
					},
					dataType: "json",
					success: function(result) {
						var i = 0;
						$.each(result.courseChaptersList, function(courseChaptersIndex, courseChaptersItem) {
							$.each(result.classHoursList, function(classHoursIndex, classHoursItem) {
								if(courseChaptersItem.courseChapterId == classHoursItem.courseChapterId) {
									console.log(classHoursItem.classHourId);
									var li = "<li class='big_title'> " + courseChaptersItem.chapterName + " </li> <a href='/pages/videoplay/video.jsp?classhourId=" + classHoursItem.classHourId + "&courseId=" + GetUrlString("courseId") + "'><li class='small_title'> " + classHoursItem.classHourName + " </li></a>"
									$(".course_titles").append(li);
									i++;
								}
							});
						});

					}
				});

			});
		</script>
		<div class="main">
			<div class="header">
				<div class="mulu">
					<span class="layui-icon-spread-left layui-icon"></span> 目录
					<div class="mulu_detils">
						<div class="coursetitle">
							SpringBoot/Maven/EasyUI视频教程【课件】
						</div>
						<ul class="course_titles">
							<!--<li class="big_title">
								第一章：maven的安装
							</li>
							<li class="small_title">
								maven的安装1
							</li>-->

						</ul>

					</div>

				</div>

				<div class="title">
					ssm与maven整合
				</div>
				<div class="pjia">
					评价
				</div>
				<div class="usericon">
					<img src="../../resources/images/A2.jpg" />
				</div>
				<div class="user">
					<div class="user_course">
						我的课程
					</div>
					<div class="quit">
						<a href='' id="exit">退出</a>
					</div>
				</div>
			</div>

			<div id="parent" style="width: 100%;height: 100%;">
				<!--http://or9ffj2ek.bkt.clouddn.com/1.1-1.3.mp4-->
				<!--https://v.youku.com/v_show/id_XMzY2MDI5NDM0MA==.html?spm=a2h0j.11185381.listitem_page1.5~A&&s=dca053efbfbd36efbfbd-->
			</div>
			<div id="url" style="display: none;"></div>
			<!--<div id="url" style="display: none;">https://v.youku.com/v_show/id_XMzY2MDI5NDM0MA==.html?spm=a2h0j.11185381.listitem_page1.5~A&&s=dca053efbfbd36efbfbd</div>-->

		</div>

		<script>
			function play() {
				var url1 = $("#url").html();
				var ivaInstance = new Iva(
					'parent', //父容器id
					{
						appkey: '410idWDt', //必填，请在控制台查看应用标识
						video: url1, //必填，播放地址（例如：http://v.youku.com/v_show/id_XMTY5NDg2MzY5Ng==.html）
						title: '小视频', //选填，建议填写方便后台数据统计
						cover: '', //选填，视频封面url
						playerUrl: '', //选填，第三方播放器与Video++互动层的桥接文件，由Video++官方定制提供，默认为空
						videoStartPrefixSeconds: 0, //选填，跳过片头，默认为0
						videoEndPrefixSeconds: 0, //选填，跳过片尾，默认为0
						/* 以下参数可以在“控制台->项目看板->应用管理->播放器设置” >进行全局设置，前端设置可以覆盖全局设置 */
						skinSelect: 0, //选填，播放器皮肤，可选0、1、2，默认为0，
						autoplay: false, //选填，是否自动播放，默认为false
						rightHand: true, //选填，是否开启右键菜单，默认为false
						autoFormat: true, //选填，是否自动选择最高清晰度，默认为false
						bubble: true, //选填，是否开启云泡功能，默认为true
						jumpStep: 10, //选填，左右方向键快退快进的时间
						tagTrack: false, //选填，云链是否跟踪，默认为false
						tagShow: false, //选填，云链是否显示，默认为false
						tagDuration: 0, //选填，云链显示时间，默认为5秒
						tagFontSize: 1, //选填，云链文字大小，默认为16像素
						editorEnable: true, // 选填，当用户登录之后，是否允许加载编辑器，默认为true
						vorEnable: true, // 选填，是否允许加载灵悟，默认为true
						vorStartGuideEnable: true //选填， 是否启用灵悟新人引导，默认为true
					}
				);
			}
		</script>
		<script>
			$(".mulu").click(function() {
				$(".mulu_detils").slideToggle(500);
			});
			$("#parent").click(function() {
				$(".mulu_detils").slideUp('slow');
			});
			$(".mulu_detils").click(function(event) {
				//阻止冒泡
				event.stopPropagation();
			});
			$(".usericon img").click(function() {
				$(".user").slideToggle(500);
			});
			$("#parent").click(function() {
				$(".user").slideUp('slow');
			});
		</script>
	</body>

</html>